<template>
<!-- 插值指令, 让此处的文本内容和变量进行绑定 -->
{{info}}
  <h3>{{info}}</h3>
<!-- v-text让元素的文本内容和变量进行绑定 -->
  <p v-text="info"></p>
<!-- v-html让元素的标签内容和变量进行绑定-->
  <p v-html="info"></p>

  <input type="button" value="按钮" @click="f()">
</template>

<script setup>
  import {ref} from "vue";
  //定义一个响应式变量,
  const info = ref("文本相关<b>加粗标签</b>");
  //定义箭头函数
  const f = ()=>{
    //修改响应式变量的值,由于页面的内容和变量进行了绑定,变量改变页面就会跟着改变
    info.value="值改变了!";
  }
</script>

<style scoped>

</style>